////
/// Components
/// Brand keyframes
////

@import 'props';

@keyframes logo-outline-bounce {
  25% {
    transform: translate(-$logo-bounce-offset, $logo-bounce-offset);
  }

  75% {
    transform: translate($logo-bounce-offset, -$logo-bounce-offset);
  }
}

@keyframes logo-rainbow-mask {
  0% {
    fill: get-color(coal, dark);
  }

  25% {
    fill: get-color(brand, purple);
  }

  50% {
    fill: get-color(brand, red);
  }

  75% {
    fill: get-color(brand, orange);
  }
}

@keyframes logo-rainbow-purple {
  0% {
    fill: get-color(brand, purple);
  }

  25% {
    fill: get-color(brand, red);
  }

  50% {
    fill: get-color(brand, orange);
  }

  75% {
    fill: get-color(coal, dark);
  }
}

@keyframes logo-rainbow-red {
  0% {
    fill: get-color(brand, red);
  }

  25% {
    fill: get-color(brand, orange);
  }

  50% {
    fill: get-color(coal, dark);
  }

  75% {
    fill: get-color(brand, purple);
  }
}

@keyframes logo-rainbow-orange {
  0% {
    fill: get-color(brand, orange);
  }

  25% {
    fill: get-color(coal, dark);
  }

  50% {
    fill: get-color(brand, purple);
  }

  75% {
    fill: get-color(brand, red);
  }
}
